<template>
	<view class="">
		<view style="height: 100%;">
			<!-- 自定义导航栏 -->
			<cu-custom bgColor="bg-gradual-red" :isBack="true">
				<block slot=="backText">返回</block>
				<block slot="content">分类</block>
			</cu-custom>

			<view class="VerticalBox">
				<scroll-view class="VerticalNav nav" scroll-y scroll-with-animation :scroll-top="verticalNavTop" style="height:calc(100vh)">
					<view class="cu-item" :class="index==tabCur?'text-green cur':''" v-for="(item,index) in categoryList" :key="item.id"
					 @tap="TabSelect" :data-id="index">
					<text class="text-cut">{{ item.name }}</text>
					</view>
				</scroll-view>
				<scroll-view class="VerticalMain" scroll-y scroll-with-animation style="height:calc(100vh)" :scroll-into-view="'main-'+mainCur"
				 @scroll="VerticalMain">
					<view v-for="(present,index) in categoryList" :key="present" :id="'main-'+index">
						<view class="cu-bar solid-bottom bg-white padding-lr padding-top">
							<view class="action">
								<text class="cuIcon-title text-green"></text>{{ present.name }}</view>
						</view>
						<!-- 放小类的标签 -->
						<view >
							<view>
								<view class="cu-list grid col-3 no-border">
									<view class="cu-item" v-for="each in present.children" :key="each.id">
										<view class="" v-for="every in each.children" :key="every.id">
											<navigator :url="'../product/product?id='+every.id" >
												<view class="cuIcon-like text-blue"></view>
												<text>{{ every.name }}</text>
											</navigator>		
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>



		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabCur: 0,
				mainCur: 0,
				verticalNavTop: 0,
				list: [],
				categoryList: []
			}
		},
		onLoad() {
			this.$api.api_categories('/categories/')
				.then(res => {
					this.categoryList = res.data.data;
				})
				.catch(error => {
					uni.showToast({
						title:error
					})
					console.log(error)
				})
		},
		methods: {
			search(params){
				uni.switchTab({
					url:'../index/index?query='+params
				})
				// this.$api.api_skus({
				// 	pageNum:1,
				// 	pageSize:10,
				// 	query:params
				// })
				// .then(res =>{
				// 	console.log(res)
				// })
				// .catch(error =>{
				// 	console.log(error)
				// })
			},
			TabSelect(e) {
				this.tabCur = e.currentTarget.dataset.id;
				this.verticalNavTop = (e.currentTarget.dataset.id - 1) * 50;
				this.mainCur = e.currentTarget.dataset.id
			},
			VerticalMain(e) {
				// #ifdef MP-ALIPAY
				return false //支付宝小程序暂时不支持双向联动 
				// #endif
				let that = this;
				let tabHeight = 0;
				if (this.load) {
					for (let i = 0; i < this.list.length; i++) {
						let view = uni.createSelectorQuery().select("#main-" + this.list[i].id);
						view.fields({
							size: true
						}, data => {
							this.list[i].top = tabHeight;
							tabHeight = tabHeight + data.height;
							this.list[i].bottom = tabHeight;
						}).exec();
					}
					this.load = false
				}
				let scrollTop = e.detail.scrollTop + 10;
				for (let i = 0; i < this.list.length; i++) {
					if (scrollTop > this.list[i].top && scrollTop < this.list[i].bottom) {
						this.verticalNavTop = (this.list[i].id - 1) * 50
						this.tabCur = this.list[i].id
						console.log(scrollTop)
						return false
					}
				}
			}
		}
	}
</script>

<style>
	.fixed {
		position: fixed;
		z-index: 99;
	}

	.VerticalNav.nav {
		width: 200upx;
		white-space: initial;
	}

	.VerticalNav.nav .cu-item {
		width: 100%;
		text-align: center;
		background-color: #fff;
		margin: 0;
		border: none;
		height: 50px;
		position: relative;
	}

	.VerticalNav.nav .cu-item.cur {
		background-color: #f1f1f1;
	}

	.VerticalNav.nav .cu-item.cur::after {
		content: "";
		width: 8upx;
		height: 30upx;
		border-radius: 10upx 0 0 10upx;
		position: absolute;
		background-color: currentColor;
		top: 0;
		right: 0upx;
		bottom: 0;
		margin: auto;
	}

	.VerticalBox {
		display: flex;
	}

	.VerticalMain {
		background-color: #f1f1f1;
		flex: 1;
	}
</style>
